<template>
  <div class="w-h-100">
    <div class="table-top-box">
      <el-button type="primary"
                 icon="el-icon-plus"
                 size="small"
                 @click="addObj">添加
      </el-button>
      <el-button type="danger"
                 icon="el-icon-delete"
                 size="small"
                 @click="deleteObj">批量删除
      </el-button>
      <span class="margin-ten">性别：</span>
      <el-select v-model="value" clearable size="small" placeholder="请选择">
        <!--   el-options里的label是分组名 ；value是选项的值    -->
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <span class="margin-ten">学生姓名：</span>
      <!--      el-input的v-model属性是绑定值-->
      <el-input v-model="input"
                size="small"
                style="width: 220px"
                placeholder="请输入学生姓名"></el-input>&ensp;
      <el-button type="primary"
                 size="small"
                 icon="el-icon-search"
                 @click="getList">搜索
      </el-button>
      <el-button type="info"
                 size="small"
                 icon="el-icon-brush"
                 @click="restClick">重置
      </el-button>
    </div>
    <div style="margin-left:10px">
      <!--  el-table的stripe属性，是否为斑马纹    -->
      <el-table
          :data="tableData"
          stripe
          height="550"
          style="width: 100%;">
        <el-table-column
            label="序号"
            type="index"
            fixed>
        </el-table-column>
        <!--    el-table-column的prop属性，对应列内容的字段名，也可使用property属性    -->
        <!--    el-table-column的label属性，显示标题    -->
        <!--    el-table-column的width属性，对应列的宽度    -->
        <el-table-column v-for="(item) in columnArr"
                         :prop="item.prop"
                         :label="item.label"
                         :width="item.width">
        </el-table-column>
        <!--    el-table-column的fixed属性，列是否固定在左侧或者右侧，true表示固定在左侧    -->
        <el-table-column
            label="操作"
            width="100"
            fixed="right">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)"
                       type="text"
                       size="small">查看
            </el-button>
            <el-button type="text"
                       size="small"
                       @click="$message.warning('开发中。。。')">编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--  弹窗通知  -->
      <!--   Dialog（对话框）中:visible.sync="dialogFormVisible"属性可以控制Dialog对话框的显示与消失
            用户通过按钮来控制dialogFormVisible的值，从而来控制是否显示弹窗   -->
      <el-dialog title="添加学生基本信息"
                 :visible.sync="dialogFormVisible"
                 style="height: 600px">
        <el-form :model="form">
          <el-form-item label="学号:" label-width="200">
            <el-input v-model="form.code" autocomplete="off" class="col-width" placeholder="请输入学号"></el-input>
          </el-form-item>
          <el-form-item label="姓名:" label-width="100">
            <el-input v-model="form.name" autocomplete="off" class="col-width" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别:" label-width="100">
            <el-select v-model="form.sex" placeholder="请下拉选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="邮箱:" label-width="100">
            <el-input v-model="form.email" autocomplete="off" class="col-width" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="电话:" label-width="100">
            <el-input v-model="form.phone" autocomplete="off" class="col-width" placeholder="请输入电话"></el-input>
          </el-form-item>
          <el-form-item label="地址:" label-width="100">
            <el-input v-model="form.address" autocomplete="off" class="col-width" placeholder="请输入地址"></el-input>
          </el-form-item>
          <el-form-item label="介绍:" label-width="100">
            <el-input type="textarea" v-model="form.introduce" class="col-width" autocomplete="off"
                      placeholder="请输入个人介绍"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer"
             class="dialog-footer"
             v-show="flag">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="determinate">确 定
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>

import {getStudentList} from "@/api/request";

export default {
  name: 'index',
  data() {
    return {
      flag: true,
      form: {
        code: '',
        name: '',
        sex: '',
        email: '',
        phone: '',
        address: '',
        introduce: '',
        icon: '',
      },
      dialogFormVisible: false,
      columnArr: [
        {prop: 'code', label: '学号', width: 140},
        {prop: 'name', label: '学生姓名', width: 80},
        {prop: 'sex', label: '性别', width: 60},
        {prop: 'email', label: '邮箱', width: 180},
        {prop: 'phone', label: '电话', width: 150},
        {prop: 'address', label: '住址', width: 180},
        {prop: 'introduce', label: '个人介绍', width: 180},
        {prop: 'icon', label: '头像', width: 80},
      ],
      tableDataTemp: [],
      tableData: [
        {
          code: '201805363540',
          name: '王小虎',
          sex: '男',
          email: '1092705638@qq.com',
          phone: '15108523467',
          introduce: '一名计算机的学生',
          icon: '无',
          option: '无',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          code: '201805363540',
          name: '张小虎',
          sex: '女',
          email: '1092705638@qq.com',
          phone: '15108523467',
          introduce: '一名计算机的学生',
          icon: '无',
          option: '无',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          code: '201805363540',
          name: '李小虎',
          sex: '女',
          email: '1092705638@qq.com',
          phone: '15108523467',
          introduce: '一名计算机的学生',
          icon: '无',
          option: '无',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          code: '201805363540',
          name: '晨小虎',
          sex: '女',
          email: '1092705638@qq.com',
          phone: '15108523467',
          introduce: '一名计算机的学生',
          icon: '无',
          option: '无',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          code: '201805363540',
          name: '柏小虎',
          sex: '男',
          email: '1092705638@qq.com',
          phone: '15108523467',
          introduce: '一名计算机的学生',
          icon: '无',
          option: '无',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          code: '201805363540',
          name: '赵小虎',
          sex: '男',
          email: '1092705638@qq.com',
          phone: '15108523467',
          introduce: '一名计算机的学生',
          icon: '无',
          option: '无',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          code: '201805363540',
          name: '王小虎',
          sex: '男',
          email: '1092705638@qq.com',
          phone: '15108523467',
          introduce: '一名计算机的学生',
          icon: '无',
          option: '无',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          code: '201805363540',
          name: '王小虎',
          sex: '男',
          email: '1092705638@qq.com',
          phone: '15108523467',
          introduce: '一名计算机的学生',
          icon: '无',
          option: '无',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          code: '201805363540',
          name: '王小虎',
          sex: '女',
          email: '1092705638@qq.com',
          phone: '15108523467',
          introduce: '一名计算机的学生',
          icon: '无',
          option: '无',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
      input: '',
      value: '',
      options: [
        {
          value: "男",
          label: "男"
        },
        {
          value: "女",
          label: "女"
        }

      ]
    }
  },
  methods: {
    getList() {
      getStudentList({sex: '1'}).then(res => {
        debugger
        this.tableData = res.data
      })
    },
    determinate() {
      this.tableData.push(this.form)
      this.dialogFormVisible = false
      this.form = {}
      this.$message.success("添加成功")
    },
    handleClick(row) {
      //关闭脚部
      this.flag = false
      //？？？？
      this.form = row
      //显示弹窗
      this.dialogFormVisible = true
    },
    restClick() {
      this.input = ''
      this.value = ''
      this.tableData = this.tableDataTemp
    },
    addObj() {
      //清空表单
      this.form = {}
      //打开他的脚部显示
      this.flag = true
      //Dialog（对话框）中:visible.sync="dialogFormVisible"属性可以控制Dialog对话框的显示与消失
      //用户通过按钮来控制dialogFormVisible的值，从而来控制是否显示弹窗
      this.dialogFormVisible = true
    },
    deleteObj() {
      this.$message.warning("开发中。。。")
    },
    // getList() {
    //   /*value:sex  input:姓名*/
    //   //如果性别和名称豆存在哪我就执行-->
    //   if (this.value && this.input) {//存在：返回ture  如果是undefine || null  || '' 返回 false
    //     this.tableData = this.tableDataTemp.filter(tag => (tag.sex === this.value && tag.name === this.input))
    //
    //     return
    //   }
    //   if (!this.value && this.input) {
    //     this.tableData = this.tableDataTemp.filter(tag => (tag.name === this.input))
    //     return
    //   }
    //   if (this.value && !this.input) {
    //     this.tableData = this.tableDataTemp.filter(tag => (tag.sex === this.value))
    //     return
    //   }
    //   if (!this.value && !this.input) {
    //     this.tableData = this.tableDataTemp
    //   }
    // }
  },
  mounted() {
    //备份一份
    this.tableDataTemp = this.tableData
    this.getList()
  }
}
</script>

<style scoped>
.table-top-box {
  height: 40px;
  margin-left: 10px;
  margin-top: 5px
}

.col-width {
  width: 300px;
}

.margin-ten {
  margin: 0 10px;
}
</style>
